<template>
	<uv-popup ref="modal" :mode="mode" :bgColor="bgColor" :round="round" :closeable="closeable" :safeAreaInsetBottom="safeAreaInsetBottom" @maskClick="maskClick" :closeOnClickOverlay="closeOnClickOverlay">
		<slot></slot>   
	</uv-popup>
</template>

<script setup>	
		const props = defineProps({
			modelValue:{
				type:Boolean,
				default:false
			},
			closeOnClickOverlay:{
				type:Boolean,
				default:true
			},
			have_image:{
				type:Boolean,
				default:true
			},
			mode:{
				type:String,
				default:'bottom' //center,left,right,top,bottom,middle,fullScreen,halfScreen
			},
			minHeight:{
				type:String,
				default:'400rpx'
			},
			title:{
				type:String,
				default:''
			},
			iconName:{
				type:String,
				default:'icon-pig' 
			},
			closeable:{
				type:Boolean,
				default:false
			},
			iconSize:{
				type:String,
				default:'100'
			},
			bgColor:{
				type:String,
				default:"transparent"
			},
			safeAreaInsetBottom:{
				type:Boolean,
				default:true
			},
			round:{
				type:String,
				default:''
			}
			
		})
		const emit = defineEmits(['update:modelValue','confirm','maskClick'])
		const state = reactive({
			show:false
		})
		const modal = ref()
		watch(() => props.modelValue,(value) => {
			emit('update:modelValue',value)
			if(value) modal.value.open()
			else modal.value.close()
		})
		const onCancel = () => {
			console.log(2);
			emit('update:modelValue',false)
		}
		function maskClick(){
			if(props.closeOnClickOverlay) onCancel()
			emit('maskClick')
		}
		const confirm = () => {		
			// emit('update:modelValue',false)
			if(props.confirmClose) onCancel()
			emit('confirm')
		}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 750rpx;
		padding: 0 64rpx;
		.icon-position {
			position: relative;
			z-index: 1;
		}
		.content-box {
			margin-top: -100rpx;
			position: relative;
			.close_class {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
		}
	}
</style>